<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <!-- <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" /> -->
    <style>
      .img {
        background: url("./img/keys.png") no-repeat;
        width: 1022px;
        height: 494px;
      }
      .img div {
        width: calc(1022px / 9);
        height: 100%;
        float: left;
        background-color: rgba(0, 0, 0, 0.8);
      }
      .down{
            background-image: linear-gradient(rgba(255,255,255,0),rgba(0,0,0,0.2));
        }
    </style>
  </head>
  <body>
    <audio src="./notes/1.mp3"></audio>
    <main class="img">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </main>
    <script>
      
      var player=document.querySelector('audio')
      var divs=document.querySelectorAll('div')
      for(var i = 0; i < divs.length; i++){
        divs[i].index=i;
        divs[i].onclick=function () {
          play(this.index);
        }
      }
      function play(index){
        player.src = 'notes/' + (index+1) + '.mp3';
        player.load();
        setTimeout(function(){
            player.play();
        },10);
    }
    var indexCode; 
    var flag = true;
    window.onkeydown = function(ev){
        var key = ev.keyCode 
        if (key>=49 && key<=57 && flag) {
            console.log('down='+key);
            flag = false;
            indexCode = key-49;//0-9
            play(indexCode);
            divs[indexCode].className = 'down';
            console.log(indexCode);
        }
    }
    window.onkeyup=function (ev) {
      flag=true
      divs[indexCode].className = '';
    }
    </script>

  </body>
</html>
